<template>
  <div class="setting">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色管理" name="first">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="isShow = true"
            >新增角色</el-button
          >
          <el-table
            border
            :data="tableData"
            style="width: 100%"
            :default-sort="{ prop: 'date', order: 'descending' }"
          >
            <el-table-column label="序号" type="index"> </el-table-column>
            <el-table-column prop="name" label="角色名" sortable width="180">
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              sortable
              width="710"
            >
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              :formatter="formatter"
              fixed="right"
            >
              <template #default="{row}">
                <el-button type="text" size="mini" @click="handleEdit(row)"
                  >分配权限</el-button
                >
                <el-button type="text" size="mini" @click="handleEdit(row)"
                  >修改</el-button
                >

                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @onConfirm="confirm(row)"
                >
                  <el-button size="mini" type="text" slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <companyInfo></companyInfo>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <settingDialog
      :visible.sync="isShow"
      :form="form"
      @getData="getData"
      @cancel="cancel"
    ></settingDialog>
  </div>
</template>

<script>
import { getRoles, editRoles, deleteRoles } from '@/api/setting'
import companyInfo from '@/views/setting/components/companyInfo'
import settingDialog from '@/views/setting/components/settingDialog'

export default {
  name: 'Setting',
  components: {
    companyInfo,
    settingDialog
  },
  data () {
    return {
      form: {
        name: '',
        description: ''
      },
      isShow: false,
      activeName: 'first',
      page: 1,
      tableData: [],
      total: 1,
      pagesize: 2
    }
  },

  created () {
    this.getData()
  },
  methods: {
    handleClick () {},
    formatter (row, column) {
      return row.address
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)

      this.pagesize = val
      this.getData()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)

      // console.log(val)
      this.page = val
      this.getData()
    },

    async getData () {
      const res = await getRoles({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(res)
      this.tableData = res.rows
      // console.log(this.tableData)
      this.total = res.total
    },
    cancel () {
      this.form = {
        name: '',
        description: ''
      }
    },
    async handleEdit (row) {
      // console.log(row)
      const res = await editRoles(row.id)
      // console.log(res)
      this.form = res
      this.isShow = true
    },
    async confirm (row) {
      await deleteRoles(row.id)
      // console.log(res)
      // console.log(row)
      // console.log(this.tableData)
      if (this.tableData.length == 1 && this.page != 1) {
        this.page--
      }
      this.$message.success('删除成功！')
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.setting {
  .el-pagination {
    text-align: right;
  }
}
</style>
